<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <link rel="stylesheet" th:href="@{/static/lib/calendar/simple-calendar.css}"/>
  <link rel="stylesheet" th:href="@{/static/css/dashboard.css}"/>
</head>

<div class="dashboard-container">
  <div class="dashboard-top row">
      <div class="dashboard-item col-lg-3 col-sm-6 col-xs-12">
        <div class="dashboard-item-left">
          <img th:src="@{/static/img/dashboard/api.png}">
        </div>
        <div class="dashboard-item-right">
          <div class="right-top">
            <div></div>
            <span>待完成任务</span>
          </div>
          <div class="right-middle">
            <div>780</div>
            <span>个</span>
          </div>
          <div class="right-bottom">
            <span>查看更多</span>
            <span class="fas fa-angle-right"></span>
          </div>
        </div>
      </div>
      <div class="dashboard-item col-lg-3 col-sm-6 col-xs-12">
        <div class="dashboard-item-left">
          <img th:src="@{/static/img/dashboard/branches.png}">
        </div>
        <div class="dashboard-item-right">
          <div class="right-top">
            <div></div>
            <span>待完成任务</span>
          </div>
          <div class="right-middle">
            <div>780</div>
            <span>个</span>
          </div>
          <div class="right-bottom">
            <span>查看更多</span>
            <span class="fas fa-angle-right"></span>
          </div>
        </div>
      </div>
      <div class="dashboard-item col-lg-3 col-sm-6 col-xs-12">
        <div class="dashboard-item-left">
          <img th:src="@{/static/img/dashboard/deployment unit.png}">
        </div>
        <div class="dashboard-item-right">
          <div class="right-top">
            <div></div>
            <span>待完成任务</span>
          </div>
          <div class="right-middle">
            <div>780</div>
            <span>个</span>
          </div>
          <div class="right-bottom">
            <span>查看更多</span>
            <span class="fas fa-angle-right"></span>
          </div>
        </div>
      </div>
      <div class="dashboard-item col-lg-3 col-sm-6 col-xs-12">
        <div class="dashboard-item-left">
          <img th:src="@{/static/img/dashboard/user.png}">
        </div>
        <div class="dashboard-item-right">
          <div class="right-top">
            <div></div>
            <span>待完成任务</span>
          </div>
          <div class="right-middle">
            <div>780</div>
            <span>个</span>
          </div>
          <div class="right-bottom">
            <span>查看更多</span>
            <span class="fas fa-angle-right"></span>
          </div>
        </div>
      </div>
    </div>
  <div class="dashboard-bottom row">
    <div class="dashboard-bottom-left col-md-6 col-sm-12">
      <div id="calendarContainer"></div>
    </div>
    <div class="dashboard-bottom-right col-md-6 col-sm-12">
      <div id="chartTop" class="chart-item"></div>
      <div id="chartBottom" class="chart-item"></div>
    </div>
  </div>
</div>

<!--simple-calendar-->
<script th:src="@{/static/lib/calendar/simple-calendar.js}" charset="utf-8"></script>
<!--echarts-->
<script th:src="@{/static/lib/echarts/echarts.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
  $(function() {
    setTimeout(() => {
      initEcharts();
    }, 100)

    initCalendar();
  })

  function initCalendar() {
    let options = {
      width: '100%',
      height: '100%',
      language: 'CH', //语言
      showLunarCalendar: false, //阴历
      showHoliday: true, //休假
      showFestival: true, //节日
      showLunarFestival: true, //农历节日
      showSolarTerm: true, //节气
      showMark: true, //标记
      timeRange: {
        startYear: 1970,
        endYear: 2099
      },
      theme: {
        changeAble: false,
        weeks: {
          backgroundColor: '#FEB016',
          fontColor: '#4A4A4A',
          fontSize: '20px',
        },
        days: {
          backgroundColor: '#ffffff',
          fontColor: '#565555',
          fontSize: '24px'
        },
        todaycolor: 'orange',
        activeSelectColor: 'orange',
      }
    }
    let myCalendar = new SimpleCalendar('#calendarContainer', options);
  }

  function initEcharts() {
    // var chartData = [[${chartData}]];
    let chartData = {
      "top": {
        "date": ["03-04", "03-05", "03-06", "03-07", "03-08", "03-09", "03-10", "03-11", "03-12", "03-13"],
        "item1": [500, 350, 760, 800, 130, 70, 320, 610, 600, 440],
        "item2": [450, 30, 200, 60, 500, 300, 310, 570, 920, 840]
      },
      "bottom": {
        "date": ["03-04", "03-05", "03-06", "03-07", "03-08", "03-09", "03-10", "03-11", "03-12", "03-13"],
        "item1": [500, 350, 760, 800, 130, 70, 320, 610, 600, 440],
        "item2": [450, 30, 200, 60, 500, 300, 310, 570, 920, 840]
      }
    };

    let chartTop = echarts.init(document.getElementById('chartTop'));
    let chartBottom = echarts.init(document.getElementById('chartBottom'));

    let topOption = {
      title: {
        text: '待完成任务'
      },
      tooltip: {},
      legend: {
        data: [{name: '项目1', icon: 'circle'}, {name: '项目2', icon: 'circle'}],
        right: 0
      },
      grid: {
        top: 56,
        left: '5%',
        right: '2%',
        bottom: 24
      },
      xAxis: {
        type: 'category',
        data: chartData.top.date,
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          color: '#999'
        },
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: '#999'
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#999'
          }
        }
      },
      series: [{
        name: '项目1',
        type: 'bar',
        barWidth: 10,
        barGap: '8%',
        color: '#17A2B8',
        data: chartData.top.item1
      }, {
        name: '项目2',
        type: 'bar',
        barWidth: 10,
        color: '#6F42C1',
        data: chartData.top.item2
      }]
    };

    let bottomOption = {
      backgroundColor: '#fff',
      title: {
        text: '待完成任务'
      },
      tooltip: {},
      legend: {
        data: [{name: '项目1', icon: 'circle'}, {name: '项目2', icon: 'circle'}],
        right: 0
      },
      grid: {
        top: 56,
        left: '5%',
        right: '2%',
        bottom: 24
      },
      xAxis: {
        type: 'category',
        data: chartData.bottom.date,
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          color: '#999'
        },
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          color: '#999'
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#999'
          }
        }
      },
      series: [{
        name: '项目1',
        type: 'bar',
        barWidth: 10,
        barGap: '8%',
        color: '#17A2B8',
        data: chartData.bottom.item1
      }, {
        name: '项目2',
        type: 'bar',
        barWidth: 10,
        color: '#FEB016',
        data: chartData.bottom.item2
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    chartTop.setOption(topOption);
    chartBottom.setOption(bottomOption);

    window.addEventListener('resize', () => {
      chartTop.resize();
      chartBottom.resize();
    })
  }
</script>